<template>
  <div>
    <!-- ck表单 -->
    <div>
      <el-row>
        新增出库表单
      </el-row><br>
      <el-form :inline="true" label-position="left" label-width="80px" :model="form">
        <el-row>
          <el-col :span="7">
            <el-form-item label="条码">
              <el-input v-model="form.barCode" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        
        
          <el-col :span="7" :offset="1">
            <el-form-item label="商品编号">
              <el-input v-model="form.goodsid" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        
          <el-col :span="7" :offset="1">
            <el-form-item label="仓库">
              <el-input v-model="form.repositoryNo" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="区域">
              <el-input v-model="form.location" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-form-item label="名字">
              <el-input  v-model="form.name" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-form-item label="成色">
              <el-input v-model="form.percenttage" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="7">
            <el-form-item label="类型">
              <el-input v-model="form.type" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-form-item label="条码">
              <el-input v-model="form.barCode" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-form-item label="加工费">
              <el-input v-model="form.processingFee" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="重量">
              <el-input v-model="form.weight" :disabled="true"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="7" :offset="1">
            <el-form-item label="商品id">
              <el-input v-model="form.goodsid" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="型号">
              <el-select v-model="form.productModel" placeholder="请选择型号">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>  
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" :offset="1">
            <el-form-item label="出库方式">
              <el-select v-model="form.ckType" placeholder="出库方式">
                <el-option
                  v-for="item in ckType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>  
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" :offset="1">
            <el-form-item label="出库数量">
              <el-input-number v-model="form.nums" :min="0" :max="rowData.nums">
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="6">&nbsp;</el-col>
          <el-col :span="6">
            <el-button type="primary" icon="el-icon-s-order" @click="add_ck_table" :loading="submitFlag">提交</el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" icon="el-icon-d-arrow-left" @click="cancel_table">驳回</el-button>
          </el-col>
          
        </el-row>
        
      </el-form>
    </div>
    <br>
    <div>
      <!-- 表格 -->
      <el-row>
        <el-col :span="4">产品信息</el-col>
        <el-col :span="4" :offset="12">
          <el-input v-model="input" placeholder="请输入入库单号"></el-input>  
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
          
        </el-col>
      </el-row>
      <el-row>
        
      </el-row>
      <br>
<!-- 表格 -->
  <el-table
    :key="refreshKey"
    :data="tableData" 
    ref="singleTable"
    highlight-current-row
    @current-change="handleCurrentChangeA"
    @row-click="rowClick"
    :row-class-name="rowClassName"
    style="width: 100%">
    <el-table-column
      type="index"
      header-align="center"
      align="center"
      width="80">
    </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="no"
        label="序号"
        width="180">
      </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="goodsid"
      label="商品编号"
      width="220">
    </el-table-column>

    <el-table-column
      header-align="center"
      align="center"
      prop="status"
      label="状态"
      :formatter="statusFormatter"
      width="120">
    </el-table-column>
        <el-table-column
      header-align="center"
      align="center"
      prop="name"
      label="名字"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="custom"
      label="客户"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="repositoryNo"
      label="仓库"
      width="160">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="percenttage"
      label="成色"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="type"
      label="类型"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="weight"
      label="重量"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="nums"
      label="数量"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="processingFee"
      label="加工费"
      width="120">
    </el-table-column>
    
  </el-table>
      <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 30]"
      :page-size="sizeEveryPage"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total:0,
      refreshKey:0,
      rowData:[],
      sizeEveryPage:10,
      submitFlag:false,
      pageNum:1,
      input:"",
      index:"",
      form: {
        name:'',
        productModel:'',
        custom:'',
        location:'',
        percenttage:'',
        weight:'',
        nums:0,
        ckType:'',
        repositoryNo:'',
        barCode:'',
        goodsid:'',
        type:'',
        makePerson:this.$store.state.grades.account,
        processingFee:'',
        category:''
      },
      tableData: [],
      options: [{
          value: 'A001',
          label: 'A001'
        }, {
          value: 'A002',
          label: 'A002'
        }, {
          value: 'B001',
          label: 'B001'
        }, {
          value: 'B002',
          label: 'B002'
        }],
        ckType: [{
          value: '1',
          label: '销售出库'
        }],
      value: '',
    };
  },
  methods:{
    //模糊查询
    search(){
      this.selectByPage();
    },
    //添加出库表
    add_ck_table(){
      // this.axios.put(this.baseUrl+"ckTable/addCkTable",{
      //   no:this.rowData.no,
      //   ckTable:this.form
      // }).then(res=>{

      // })
      if(this.form.nums == 0){
        this.$message.error("请先添加数量~");
        return;
      }

      this.$confirm('确定要提交表单吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitFlag = true;
      //提交入库单
        
        this.axios({
          method:'put',
          url:this.baseUrl+'ckTable/addCkTable/'+this.rowData.id,
          data:this.form,
          headers:{
            "Content-Type": "application/json; charset=UTF-8"
          }
        }).then(res=>{
          if(res.data.status == 'SYSTEM_BUSY'){
            this.$message.error(res.data.message);
          }
          if(res.data.status == 'SUCCESS'){
            this.$message({
              message:res.data.message,
              type:'success'
            });
            this.rowData.nums = this.rowData.nums - this.form.nums;
            this.tableData[this.index].status = this.rowData.nums;
            this.form.nums = 0;
          }
          this.refreshKey++;
          this.submitFlag = false;
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });

    },
    cancel_table(){
      //驳回表单

    },

    rowClick(row){
      this.rowData = this.tableData[row.index];
      this.index = row.index;

      //给表单不可改属性赋值
      this.form.name = this.rowData.name;
      this.form.custom = this.rowData.custom;
      this.form.goodsid = this.rowData.goodsid;
      this.form.repositoryNo  = this.rowData.repositoryNo;
      this.form.location = this.rowData.location;
      this.form.status = 1,
      this.form.percenttage = this.rowData.percenttage;
      this.form.type = this.rowData.type;
      this.form.barCode = this.rowData.barCode;
      this.form.weight = this.rowData.weight;
      this.form.processingFee = this.rowData.processingFee;

    },

        //将行索引放进row
    rowClassName({row,rowIndex}){
      row.index = rowIndex;
    },
    handleCurrentChangeA(val) {
        this.rowData = val;
    },


        //分页
    //按每页显示条数查
    handleSizeChange(val) {
      this.sizeEveryPage = val;
      //console.log(this.sizeEveryPage);
      this.selectByPage();
    },
    //按页码查
    handleCurrentChange(val) {
      //console.log(val);
      this.pageNum = val;
      //console.log(this.pageNum);
      this.selectByPage();
    },
    //分页查询方法
    selectByPage(){
      this.detailFlag = false;
      this.axios({
        method:"get",
        url:this.baseUrl+"repository/findByCondition",
        params:{
          input:this.input,
          page:this.pageNum,
          nums:this.sizeEveryPage
        }
      }).then(res=>{
        //this.dataFormat(res.data.data.list);
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        this.rowData = res.data.data.list[0];
      })
    },
    //转换信息的显示
    statusFormatter(val){
      if(val.nums < 20){
       return "缺货";
      }else{
        return '充足';
      }
    },

  },
  created(){
        //查询仓库表
    this.axios({
      method:'get',
      url:this.baseUrl+"repository/findByCondition",
      params:{
        input:"",
        page:1,
        nums:10
      }
    }).then(res=>{
      //let data = res.data.data.list;
      this.total = res.data.data.total;
      this.tableData = res.data.data.list;
      this.rowData = res.data.data.list[0];
      console.log(res);
    })
  }
}
</script>

<style scoped>

</style>